<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 px-4 py-24">
    <div class="max-w-4xl mx-auto">
      <h1 class="text-2xl font-bold mb-6 flex items-center gap-2">
        <i class="fa fa-bell text-primary"></i>消息中心
      </h1>

      <!-- Tab 切换 -->
      <div class="flex gap-4 border-b border-gray-200 dark:border-gray-700 mb-4">
        <button
          v-for="t in tabs"
          :key="t.key"
          @click="curTab = t.key"
          class="pb-2 px-1 text-sm font-medium transition"
          :class="
            curTab === t.key
              ? 'text-primary border-b-2 border-primary'
              : 'text-gray-500 hover:text-primary'
          "
        >
          {{ t.label }} ({{ t.key === 'unread' ? unread : messages.length }})
        </button>
      </div>

      <!-- 列表 -->
      <div v-if="filteredList.length" class="space-y-3">
        <div
          v-for="msg in filteredList"
          :key="msg.id"
          class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 flex items-start gap-3"
        >
          <div class="w-10 h-10 rounded-full flex items-center justify-center text-white"
               :class="msg.type === 'system' ? 'bg-blue-500' : 'bg-green-500'">
            <i :class="msg.type === 'system' ? 'fa fa-cog' : 'fa fa-gift'"></i>
          </div>
          <div class="flex-1">
            <div class="flex items-center justify-between">
              <h3 class="font-medium">{{ msg.title }}</h3>
              <span class="text-xs text-gray-400">{{ msg.date }}</span>
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">{{ msg.content }}</p>
          </div>
          <!-- 标为已读 -->
          <button
            v-if="!msg.read"
            @click="markRead(msg.id)"
            class="text-xs text-primary hover:underline"
          >
            标为已读
          </button>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="text-center py-12 text-gray-400">
        <i class="fa fa-inbox text-4xl mb-3"></i>
        <p>暂无消息</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const tabs = [
  { key: 'all', label: '全部' },
  { key: 'unread', label: '未读' }
]
const curTab = ref('all')
const messages = ref([])

const unread = computed(() => messages.value.filter(m => !m.read).length)
const filteredList = computed(() =>
  curTab.value === 'unread' ? messages.value.filter(m => !m.read) : messages.value
)

function markRead(id) {
  const target = messages.value.find(m => m.id === id)
  if (target) target.read = true
  syncStorage()
}

function syncStorage() {
  localStorage.setItem('msg_list', JSON.stringify(messages.value))
}

onMounted(() => {
  // 模拟拉取
  const mock = [
    {
      id: 1,
      type: 'system',
      title: '欢迎加入海龟汤',
      content: '开始你的第一段推理之旅吧！',
      date: '2025-06-01',
      read: false
    },
    {
      id: 2,
      type: 'reward',
      title: '会员福利到账',
      content: '赠送的 3 次提示已发放，请注意查收。',
      date: '2025-06-02',
      read: false
    }
  ]
  messages.value = JSON.parse(localStorage.getItem('msg_list')) || mock
  syncStorage()
})
</script>